<template>
  <div>
    <BasicTable @register="registerTable">
      <template #tableTitle>
        <a-button type="primary" @click="handleForm(false, {})"> <Icon icon="i-ant-design:plus-outlined" /> {{ t("新增") }} </a-button>
      </template>
    </BasicTable>
    <InputForm @register="registerInputFormDrawer" @success="reload()" />
  </div>
</template>
<script lang="ts" name="shop-goods-expand" setup>
  import { ref } from "vue"
  import { BasicTable, BasicColumn, useTable, FormSchema } from "/@/components/Table"
  import { useDrawer } from "/@/components/Drawer"
  import { useI18n } from "/@/hooks/web/useI18n"
  import { useGlobSetting } from "/@/hooks/setting"
  import { listGoodsAttr, deleteGoodsAttr } from "/@/api/bizShop/shop"
  import { useMessage } from "/@/hooks/web/useMessage"
  import InputForm from "./GoodsAttrForm.vue"
  import { Icon } from "/@/components/Icon"
  import { render } from "/@/utils/common/renderUtils"

  const { t } = useI18n("")
  const { createMessage } = useMessage()
  const glob = useGlobSetting()
  const [registerInputFormDrawer, { openDrawer: openInputFormDrawer }] = useDrawer()

  const columns: BasicColumn[] = [
    {
      title: t("名称"),
      dataIndex: "name",
      width: 100,
    },
    {
      title: t("属性值"),
      dataIndex: "values",
      width: 280,
      align: "center",
      customRender: ({ text }) => {
        let color = "green"
        const value = text.map((e) => (e.additionalPrice > 0 ? e.name + " $" + e.additionalPrice : e.name))
        return render.renderTag(value, color)
      },
    },
    {
      title: t("排序号"),
      dataIndex: "sortNo",
      width: 60,
      align: "center",
    },
    {
      title: t("支持多选"),
      dataIndex: "multipleChoice",
      width: 80,
      align: "center",
      customRender: ({ text }) => {
        const value = text ? "是" : "否"
        let color = "green"
        if (!text) {
          color = "red"
        }
        return render.renderTag(value, color)
      },
    },
    {
      title: t("是否必填"),
      dataIndex: "required",
      width: 80,
      align: "center",
      customRender: ({ text }) => {
        const value = text ? "是" : "否"
        let color = "green"
        if (!text) {
          color = "red"
        }
        return render.renderTag(value, color)
      },
    },
  ]

  const actionColumn: BasicColumn = {
    width: 90,
    title: "操作",
    dataIndex: "action",
    fixed: "right",
    slot: "tableActions",
    actions: (record: Recordable) => [
      {
        label: "删除",
        color: "error",
        // auth: 'sys:area:delete',
        popConfirm: {
          title: "是否确认删除",
          confirm: handleDelete.bind(null, record),
        },
      },
      {
        label: "编辑",
        onClick: handleForm.bind(null, true, record),
      },
    ],
    dropDownActions: (record: Recordable) => [],
  }

  const [registerTable, { reload }] = useTable({
    title: "属性库",
    api: listGoodsAttr,
    columns,
    bordered: false,
    // formConfig: {
    //   baseColProps: { lg: 6, md: 12 },
    //   labelWidth: 90,
    //   schemas: searchFormSchema,
    //   showResetButton: false,
    // },
    ellipsis: false,
    showTableSetting: false,
    useSearchForm: false,
    isTreeTable: false,
    pagination: false,
    canResize: false,
    rowKey: "id",
    actionColumn,
  })

  async function handleDelete(record) {
    await deleteGoodsAttr({ id: record.id })
    reload()
  }

  const handleForm = (isUpdate, record) => {
    openInputFormDrawer(true, { record, isUpdate })
  }
</script>
